<template>
	<view class="video-page">
		<view class="add-video" @click="trigger">
			<u-icon name="plus-circle-fill" color="#FF9900" size="32" label="上传视频"></u-icon>
		</view>
		<view class="back" @click="goBack">
			<u-icon name="arrow-left" color="#FF9900" size="50" label=""></u-icon>
		</view>
		<view class="catename">
			<uni-segmented-control :current="current" :values="tabs" @clickItem="onClickItem" style-type="text"
				active-color="#FF9900"></uni-segmented-control>
		</view>
		<view class="content">
			<view v-show="current === 0" style="height: 100%;">
				<nodate v-if="VideoList.length<1" />
				<swiper class="video-box" duration="500" :vertical="true" :circular="true">
					<swiper-item v-for="(it, i) in VideoList" :key="i" class="video-item">
						<video style="width: 100%;object-fit:cover"
							:src="$api.json('baseUrl')+'/upload/' + it.videourl" controls :autoplay="false"
							:show-mute-btn="true"
							:poster="it.imgurl?$api.json('baseUrl')+'/upload/'+ it.imgurl:uuu"></video>
					</swiper-item>
				</swiper>
		
			</view>
			<view v-show="current === 1">
				<nodate v-if="VideoList2.length<1" />
				<swiper class="video-box" duration="500" :vertical="true" :circular="true">
					<swiper-item v-for="(it, i) in VideoList" :key="i" class="video-item">
						<video style="width: 100%;object-fit:cover"
							:src="$api.json('baseUrl')+'/upload/' + it.videourl" controls :autoplay="false"
							:show-mute-btn="true"
							:poster="it.imgurl?$api.json('baseUrl')+'/upload/'+ it.imgurl:uuu"></video>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<popup ref="popup" type="center">
			<view class="pop">
				<view class="video">
					<video id="myVideo" :src="VideoSrc" controls style="width: 100%;"></video>
				</view>
				<view class="" style="width: 100%;padding:40rpx 0">
					<textarea :value="title" placeholder-style="color:#ff9900" placeholder="请输入视频主题" auto-height
						@blur="titleChang" style="border:1rpx solid #ccc;padding:20rpx;width: 92%" />
				</view>
				<u-button :ripple="true" type="warning" ripple-bg-color="#f29100" plain :loading="false"
					@click="addVideo">确认上传</u-button>
				<!-- <button type="success" size="mini" :loading="false" plain @click="addVideo">确认上传</button> -->
			</view>
		</popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				VideoSrc: '',
				getVideoUrl: '',
				title: '',
				current: 0,
				tabs: ['推荐视频', '我的视频'],
				VideoList: [],
				VideoList2: [],
			}
		},
		onPullDownRefresh() {
			this.getAdminVideo()
		},
		onShow() {
			this.getAdminVideo()
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					if (this.current == 0) {
						this.getAdminVideo()
					} else {
						this.getVideo()
					}
				}
			},
			getAdminVideo() {
				uni.request({
					method: 'POST',
					url: this.$api.json('baseUrl') + '/config/getAdminVideo',
					data: {},
					success: (res) => {
						if (res.data.resultCode == '000000') {
							this.VideoList = res.data.data
							uni.stopPullDownRefresh();
						} else {
							this.$api.msg(res.data.resultInfo || res.data.error);
						}
					}
				});
			},
			getVideo() {
				uni.request({
					method: 'POST',
					url: this.$api.json('baseUrl') + '/config/getStuVideo', //仅为示例，并非真实接口地址。
					data: {
						type: this.current
					},
					success: (res) => {
						if (res.data.resultCode == '000000') {
							this.VideoList2 = res.data.data
							uni.stopPullDownRefresh();
						} else {
							this.$api.msg(res.data.resultInfo || res.data.error);
						}
					}
				});
			},
			trigger() {
				uni.chooseVideo({
					success: (choosevideo) => {
						const tempFilePath = choosevideo.tempFilePath;
						const tempFile = choosevideo.tempFile;
						this.VideoSrc = tempFilePath
						console.log(choosevideo, 555);
						this.$refs.popup.open()
						this.title = ''
						this.sureUpload(tempFile, tempFilePath)

					}
				});
			},
			titleChang(e) {
				this.title = e.detail.value
			},
			sureUpload(tempFile, tempFilePath) {
				uni.uploadFile({
					url: this.$api.json('baseUrl') + '/upload/fileUpload',
					file: tempFile,
					filePath: tempFilePath,
					name: 'files',
					fileType: 'video',
					success: (res) => {
						const ress = JSON.parse(res.data)
						console.log(ress.data, 88);
						// this.$refs.popup.open()
						this.getVideoUrl = ress.data
					}
				});
			},
			goBack(){
				uni.navigateBack()
			},
			addVideo() {
				if (this.title.length < 1) {
					return this.$api.msg('请输入视频主题！')
				}
				uni.showLoading({
					title: '上传中...'
				});
				uni.request({
					method: 'POST',
					url: this.$api.json('baseUrl') + '/config/addStuVideo',
					data: {
						title: this.title,
						videourl: this.getVideoUrl
					},
					success: (res) => {
						this.$api.msg(res.data.resultInfo);
						if (res.data.resultCode == '000000') {
							this.$refs.popup.close()
							this.getAdminVideo()
							this.getVideo()
						} else {
							this.$api.msg(res.data.resultInfo);
						}
					},
				})
			},
		}
	}
</script>

<style lang="scss">
	.video-page {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		height: 100vh;
		.add-video {
			position: fixed;
			top: 26rpx;
			right: 30rpx;
			z-index: 999;
		}
		.back{
			position: fixed;
			top: 26rpx;
			left: 30rpx;
			z-index: 999;
		}
		.content{
			flex: 1;
			.video-box{
				height: 100%;
				.video-item{
					background-color: #000;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.catename {
			// width: 60%;
			border-radius: 20rpx 20rpx 0 0;
			padding: 80rpx 20rpx 0 20rpx;
			font-size: 40rpx;
			background-color: #FFF;
		}

		.slider {
			// white-space:;
			width: 100%;
			background-color: white;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
		}
	}
</style>
